<template>
    <view class="mine">
        <tabBar :current="3" />
        <image :src="BaseUrl + '/static/common/top_bg.png'" class="top_bg" mode="scaleToFill" />
        <view class="userinfo_box">
            <view class="user">
                <view class="user_head" @click="goInfo()">
                    <view class="avatar">
                        <image
                            :src="
                                userinfo.avatar
                                    ? BaseUrl + userinfo.avatar
                                    : BaseUrl + '/static/mrtx.png'
                            "
                            mode="scaleToFill"
                        />
                    </view>
                    <view class="user_info">
                        <view class="username">
                            {{ userinfo.username ? userinfo.username : "注册/登录" }}
                        </view>
                        <view class="u-flex">
                            <image
                                :src="BaseUrl + '/static/common/cen7.png'"
                                style="width: 40rpx; height: 40rpx; margin-right: 6rpx"
                                mode="scaleToFill"
                                @click="goDian()"
                            />
                            <view class="member">
                                <text class="vip">
                                    {{ userinfo.vip_time ? "会员" : "非会员" }}
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
                <image
                    @click="goInfo()"
                    class="szPic"
                    :src="BaseUrl + '/static/common/sz.png'"
                    mode="scaleToFill"
                />
            </view>
        </view>
        <view class="member_box">
            <image :src="BaseUrl + '/static/common/member.png'" mode="widthFix" />
            <view class="member">
                <view class="left">
                    <view class="member_title">
                        <text>{{ userinfo.vip_time ? "尊享会员" : "会员" }}</text>
                    </view>
                    <view class="member_title">
                        <text v-if="!userinfo.vip_time">开通会员享受更多优惠</text>
                        <text v-if="userinfo.vip_time"
                            >到期时间：{{ userinfo.vip_time | formatTimestamp }}</text
                        >
                    </view>
                </view>
                <button @click="buyVip">{{ userinfo.vip_time ? "立即续费" : "立即购买" }}</button>
            </view>
        </view>
        <view class="card1">
            <view class="card_box">
                <view class="card_item" @click="Goshou">
                    <text class="num">{{ statistics.dynamic.collection }}</text>
                    <text class="tit">我的收藏</text>
                </view>
                <view class="card_item" @click="toRecord()">
                    <text class="num">{{ statistics.dynamic.footprint }}</text>
                    <text class="tit">浏览记录</text>
                </view>
                <view class="card_item" @click="toIntegral()">
                    <text class="num">{{ userinfo.score ? userinfo.score : 0 }}</text>
                    <text class="tit">我的积分</text>
                </view>
            </view>
        </view>
        <view class="card2">
            <view class="card_box">
                <view class="title" @click="toJump(0)">
                    <text class="tit">我的订单</text>
                    <view class="more">
                        <text>查看全部</text>
                        <image :src="BaseUrl + '/static/wImg/arrowRig.png'" mode="scaleToFill" />
                    </view>
                </view>
                <view class="card_list">
                    <view
                        class="card_item"
                        v-for="item in list"
                        :key="item.id"
                        @click="toJump(item.id)"
                    >
                        <image
                            class="icon"
                            :src="BaseUrl + '/static/common/cd' + item.id + '.png'"
                            mode="scaleToFill"
                        />
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="card3">
            <view class="card_box">
                <view class="card_list">
                    <view
                        class="card_item"
                        v-for="item in list1"
                        :key="item.id"
                        @click="goTo(item.id)"
                    >
                        <image
                            class="icon"
                            :src="
                                item.id == 9 || item.id == 10
                                    ? BaseUrl + '/static/cen' + item.id + '.png'
                                    : BaseUrl + '/static/common/cen' + item.id + '.png'
                            "
                            mode="scaleToFill"
                        />
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import tabBar from "@/components/tabBar/tabBar.vue";
import { BaseUrl } from "../../../utils/req.js";
import { getBrowseList, getRefreshUser } from "../../../utils/newLive.js";
export default {
    components: {
        tabBar,
    },
    data() {
        return {
            vip_card: null,
            BaseUrl: BaseUrl,
            userinfo: {},
            list: [
                {
                    id: 1,
                    name: "待付款",
                },
                {
                    id: 2,
                    name: "待发货",
                },
                {
                    id: 3,
                    name: "收货/自提",
                },
                {
                    id: 3,
                    name: "待核销",
                },
                {
                    id: 4,
                    name: "已完成",
                },
            ],
            list1: [
                {
                    id: 1,
                    name: "我的推广",
                },
                {
                    id: 2,
                    name: "我的钱包",
                },
                {
                    id: 3,
                    name: "我的攻略",
                },
                {
                    id: 4,
                    name: "我的产品",
                },
                {
                    id: 5,
                    name: "红包卡券",
                },
                {
                    id: 6,
                    name: "地址管理",
                },
                {
                    id: 7,
                    name: "商家入驻",
                },
                {
                    id: 8,
                    name: "隐私政策",
                },
                {
                    id: 9,
                    name: "分销订单",
                },
                {
                    id: 10,
                    name: "拼团订单",
                },
                {
                    id: 11,
                    name: "种草收藏",
                },
            ],
            statistics: {},
        };
    },
    async onShow() {
        const data = await getRefreshUser(uni.getStorageSync("token"));
        this.userinfo = data.data.userinfo;
        this.statistics = data.data.statistics;
        uni.setStorageSync("userInfo", data.data.userinfo);
        uni.setStorageSync("statistics", data.data.statistics);
        uni.setStorageSync("score", data.data.userinfo.score);
    },
    methods: {
        //点击跳转的店铺
        goDian() {
            uni.navigateTo({
                url: "/upRelease/Shop/Shop",
            });
        },
        // 购买vip
        buyVip() {
            uni.navigateTo({
                url: "/upRelease/buymember",
            });
        },
        // 跳转我的收藏
        Goshou() {
            uni.navigateTo({
                url: "/dabai/pages/Collection/Collection",
            });
        },
        //跳转到浏览记录
        toRecord() {
            console.log("跳转到浏览记录");
            uni.navigateTo({
                url: "/upRelease/Browsing/Browsing",
            });
        },
        toJump(id) {
            uni.navigateTo({
                url: "/liu/pages/order?id=" + id,
            });
        },
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
        goInfo() {
            if (!uni.getStorageSync("token")) {
                this.navigateTo("/liu/pages/login");
                return;
            }
            this.navigateTo("/liu/pages/userinfo");
        },
        toIntegral() {
            this.navigateTo("/liu/pages/Integral");
        },
        goTo(id) {
            if (id == 1) {
                this.navigateTo("/liu/pages/team");
            } else if (id == 2) {
                this.navigateTo("/liu/pages/purse");
            } else if (id == 3) {
                this.navigateTo("/pages/apps/find/user");
            } else if (id == 4) {
                this.$request
                    .post("api/wanlshop.merchant/shop_details", {
                        token: uni.getStorageSync("token"),
                    })
                    .then((res) => {
                        console.log(res, "门店详情");
                        if (res.code == 0 && res.msg == "门店不存在") {
                            uni.navigateTo({
                                url: "/upRelease/shangjia/shangjia",
                            });
                        } else {
                            uni.navigateTo({
                                url: "/yCreate/pages/goodsManagement",
                            });
                        }
                    })
                    .catch((err) => {
                        if (err.code == 0 && err.msg == "门店不存在") {
                            uni.navigateTo({
                                url: "/upRelease/shangjia/shangjia",
                            });
                        }
                    });
            } else if (id == 5) {
                this.navigateTo("/liu/pages/coupons");
            } else if (id == 6) {
                this.navigateTo("/liu/pages/address");
            } else if (id == 7) {
                this.$request.post("api/wanlshop.shop/apply_check").then((res) => {
                    console.log(res, "商家入驻");
                    if (!res.data) {
                        this.navigateTo("/upRelease/shangjia/shangjia");
                    } else if (res.data.verify == 3) {
                        uni.showToast({
                            title: "您已是商家",
                            icon: "none",
                        });
                        setTimeout(() => {
                            uni.navigateTo({
                                url: "/yCreate/pages/goodsManagement",
                            });
                        }, 1000);
                    } else if (res.data.verify < 3) {
                        uni.showToast({
                            title: "商家审核中",
                            icon: "none",
                        });
                    } else if (res.data.verify == 4) {
                        uni.showToast({
                            title: "审核未通过",
                            icon: "none",
                        });
                        setTimeout(() => {
                            this.navigateTo("/upRelease/shangjia/shangjia");
                        }, 800);
                    }
                });
            } else if (id == 8) {
                this.navigateTo("/user/pages/protocol");
            } else if (id == 9) {
                this.navigateTo("/liu/pages/distributionOrder");
            } else if (id == 10) {
                this.navigateTo("/pages/apps/groups/order/order");
            } else if (id == 11) {
                this.navigateTo("/dabai/pages/plantingCollection/plantingCollection");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.mine {
    width: 100%;
    height: 100vh;
}

.top_bg {
    width: 100%;
    height: 30vh;
    position: fixed;
    z-index: -1;
}

.userinfo_box {
    width: 100%;
    height: 21vh;
    padding: 0 40rpx;
    box-sizing: border-box;

    .user {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        top: 11vh;

        .user_head {
            display: flex;
            align-items: center;

            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;

                image {
                    width: 100%;
                    height: 100%;
                    border: 4rpx solid #fff;
                    border-radius: 50%;
                    vertical-align: middle;
                }
            }

            .user_info {
                margin-left: 20rpx;

                .username {
                    font-size: 40rpx;
                    font-weight: bold;
                    padding-bottom: 10rpx;
                }
                .member {
                    width: 150rpx;
                    height: 38rpx;
                    line-height: 38rpx;
                    background-image: url(https://same.ascetic.top/static/shopping/hbiao.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    color: #000;
                    font-size: 24rpx;
                    position: relative;
                    .vip {
                        height: 38rpx;
                        line-height: 38rpx;
                        position: absolute;
                        right: 8%;
                        width: 80rpx;
                        text-align: center;
                    }
                }
            }
        }

        .szPic {
            width: 40rpx;
            height: 40rpx;
        }
    }
}

.member_box {
    width: 100%;
    position: relative;

    image {
        width: 100%;
        max-height: 114rpx;
    }

    .member {
        position: absolute;
        display: flex;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 12%;
        height: 90%;

        .left {
            display: flex;
            align-items: center;

            .member_title {
                font-size: 26rpx;
                color: #fff;
                margin-right: 10rpx;
            }

            .member_tip {
                font-size: 24rpx;
                color: #fff;
                font-weight: length($list: 400);
            }
        }

        button {
            width: 140rpx;
            height: 50rpx;
            background: #fff;
            color: #038557;
            line-height: 50rpx;
            font-size: 24rpx;
            font-weight: bold;
            border-radius: 30rpx;
        }
    }
}

.card1 {
    width: calc(100% - 80rpx);
    margin: 0 40rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    background: #fff;
    padding: 30rpx 0 40rpx 0;

    .card_box {
        display: flex;
        justify-content: space-around;

        .card_item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .num {
                font-size: 30rpx;
                font-weight: bold;
                line-height: 1.7em;
            }

            .tit {
                font-size: 24rpx;
                color: #9e9e9e;
            }
        }
    }
}

.card2 {
    width: calc(100% - 80rpx);
    margin: 0 40rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    background: #fff;
    padding: 30rpx 0 20rpx 0;
    margin-top: 20rpx;

    .card_box {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx;

            .tit {
                font-size: 30rpx;
                font-weight: bold;
            }

            .more {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                color: #9e9e9e;

                image {
                    margin-left: 8rpx;
                    width: 14rpx;
                    height: 24rpx;
                    opacity: 0.4;
                }
            }
        }

        .card_list {
            display: flex;
            justify-content: space-evenly;
            padding-top: 20rpx;

            .card_item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                text {
                    line-height: 2em;
                }
            }
        }
    }
}

.card3 {
    width: calc(100% - 80rpx);
    margin: 0 40rpx;
    border-radius: 16rpx;
    background: #fff;
    padding: 30rpx 0 0 0;
    margin-top: 20rpx;

    .card_box {
        .card_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .card_item {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20rpx;

                text {
                    line-height: 2em;
                }
            }
        }
    }
}

.icon {
    width: 50rpx;
    height: 50rpx;
}
</style>
